<template>
	<el-row 
		:class="{ 
			'vp-search-row': true, 
			'vp-search-span-count-1': span === 1, 
			'vp-search-span-count-2': span === 2, 
			'vp-search-span-count-3': span === 3, 
			'vp-search-span-count-4': span === 4, 
			'vp-search-more-hidden': !showMore, 
			'vp-search-more-btn-hidden': !showMoreBtn, 
		}">
		<slot></slot>
	</el-row>
</template>
<script setup lang="ts" name="vpSearchRow">
import { ref, onMounted, onUnmounted, computed, useSlots } from 'vue'

const props = defineProps({
	showMore: {
		type: Boolean,
		default: () => false,
	},
	span: {
		type: Number,
	},
});

const slots = useSlots();

const span = ref(props.span || 4);

// 根据分辨率判断每行显示的列数
const handleResize = () => {
	if (props.span) {
		span.value = props.span;
	} else if (window.innerWidth >= 1200) {
		span.value = 4;
	} else if (window.innerWidth >= 992) {
		span.value = 3;
	} else if (window.innerWidth >= 768) {
		span.value = 2;
	} else {
		span.value = 1;
	}
};

// 如果一行能显示完，则无需显示更多按钮
const showMoreBtn = computed(() => {
	return slots && slots.default && slots.default().length > span.value;
});

onMounted(() => {
	window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
	window.removeEventListener('resize', handleResize);
});

</script>

<style>

	/* .vp-search-row {
		max-height: 134px;
		overflow-y:auto;
	} */

	.vp-search-more-hidden .vp-search-col {
		display: none !important;
	}

	.vp-search-more-hidden .vp-search-col:nth-child(1):not(.vp-search-btn-col) {
		display: block !important;
	}

	.vp-search-more-hidden.vp-search-span-count-3 .vp-search-col:nth-child(2):not(.vp-search-btn-col),
	.vp-search-more-hidden.vp-search-span-count-4 .vp-search-col:nth-child(2):not(.vp-search-btn-col) {
		display: block !important;
	}

	.vp-search-more-hidden.vp-search-span-count-4 .vp-search-col:nth-child(3):not(.vp-search-btn-col) {
		display: block !important;
	}

	.vp-search-more-hidden .vp-search-btn-col {
		display: flex !important;
	}

</style>